<template>
  <div>
    {{ message }}
    <el-button @click="message = 111">更新</el-button>
  </div>

</template>
<script>
export default {
  name: "index",
  props: {
    config: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      message: "hellow world"
    };
  },
  beforeCreate: function() {
    console.group("------beforeCreate 创建前状态------");
    console.log("%c%s", "color:red", "el：     " + this.$el); // undefined
    console.log("%c%s", "color:red", "data：   " + this.$data); // undefined
    console.log("%c%s", "color:red", "message：" + this.message); // undefined
  },
  created: function() {
    console.group("------created 创建完毕状态------");
    console.log("%c%s", "color:red", "el：     " + this.$el); // undefined
    console.log("%c%s", "color:red", "data：   " + this.$data); // [object Object]
    console.log("%c%s", "color:red", "message：" + this.message); // hellow world
  },
  beforeMount: function() {
    console.group("------beforeMount 挂载前状态------");
    console.log("%c%s", "color:red", "el：     " + this.$el); // undefined
    console.log("%c%s", "color:red", "data：   " + this.$data); // [object Object]
    console.log("%c%s", "color:red", "message：" + this.message); // hellow world
  },
  mounted: function() {
    console.group("------mounted 挂载结束状态------");
    console.log("%c%s", "color:red", "el：     " + this.$el); // [object HTMLDivElement]
    console.log(this.$el);
    console.log("%c%s", "color:red", "data：   " + this.$data); // [object Object]
    console.log("%c%s", "color:red", "message：" + this.message); // hellow world
  },
  beforeUpdate: function() {
    console.group("------beforeUpdate 更新前状态------");
    console.log("%c%s", "color:red", "el：     " + this.$el); // [object HTMLDivElement]
    console.log(this.$el);
    console.log("%c%s", "color:red", "data：   " + this.$data); // [object Object]
    console.log("%c%s", "color:red", "message：" + this.message); // 111
  },
  updated: function() {
    console.group("------updated 更新结束状态------");
    console.log("%c%s", "color:red", "el：     " + this.$el); // [object HTMLDivElement]
    console.log(this.$el);
    console.log("%c%s", "color:red", "data：   " + this.$data); // [object Object]
    console.log("%c%s", "color:red", "message：" + this.message); // 111
  },
  beforeDestroy: function() {
    console.group("------beforeDestroy 销毁前状态------");
    console.log("%c%s", "color:red", "el：     " + this.$el); // [object HTMLDivElement]
    console.log(this.$el);
    console.log("%c%s", "color:red", "data：   " + this.$data); // [object Object]
    console.log("%c%s", "color:red", "message：" + this.message); // hellow world
  },
  destroyed() {
    console.group("------destroyed 销毁结束状态------");
    console.log("%c%s", "color:red", "el：     " + this.$el); // [object HTMLDivElement]
    console.log(this.$el);
    console.log("%c%s", "color:red", "data：   " + this.$data); // [object Object]
    console.log("%c%s", "color:red", "message：" + this.message); // hellow world
  }
};
</script>

<style scoped></style>
